<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修改名称列表</title>
<style>
  table {
    border-right: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
    text-align: center;
  }
  
  table th {
    border-left: 1px solid #E0E0E0;
    border-top: 1px solid #E0E0E0;
    color: gray;
  }
  
  table td {
    border-left: 1px solid #E0E0E0;
    border-top: 1px solid #E0E0E0;
  }

  /* input {
    border:none;
    font-size: 16px;
    font-family: "微软雅黑";
    size: 12;
  } */
</style>
</head>

<body>
<br/>
修改模式： <input type="radio" value="layer_instname" checked/>
<label for="layer_instname">标签→实例名</label>
<br/><br/>
<table width="95%" align="center" cellspacing="0">
  <tr>
    <th width=40%>新名称</th>
    <th></th>
    <th width=40%>旧名称</th>
  </tr>   
  <tbody id="namePairList">
  </tbody>
</table>

<br>
<div style="text-align:center;vertical-align:middel;">
  <input type="button" style="font-size: 16px;" value="&nbsp;修改&nbsp;" onclick="changeNames()"/>
</div>


</body>
 
<script src="../js/jquery-3.7.1.min.js"></script>
<script type="text/javascript">

  var nameContainer; 
  
  $(document).ready(function(){
	  sketchup.get_name_pair_list();
  });

  //接受ruby端传来的nameContainerJson
  function setNameContainer(nameContainerJson)
  {
    this.nameContainer = nameContainerJson;
    for(let i in nameContainer)
    {
      namePair = JSON.parse(nameContainer[i]);
      // $("#namePairList").append("<tr height=36px><td><input type=text value=\""+
      //   namePair.sourceName+"\"></input></td><td style=\"color:#C0C0C0\">→</td><td>"+
      //   namePair.destName+"</td></tr>"); 
      $("#namePairList").append("<tr height=36px><td>"+
        namePair.sourceName+"</td><td style=\"color:#C0C0C0\">→</td><td>"+
        namePair.destName+"</td></tr>"); 
    }
  }

  //点击按钮后，把用户确认的名称送回ruby，执行修改功能
  function changeNames(nameContainerJson)
  {
    sketchup.update_names();
  }


</script>
</html>
